<template>
  <div>
    <div class="ke__panel">
      <div class="ke__panel-head">
        <el-button size="small" @click="onClickBack">返回</el-button>

        <el-button size="small" :loading="subing" type="primary" @click="$refs.form.onSubmit()">
          <i class="icon icon-save" style="font-size: 12px"/>
          保存
        </el-button>
      </div>
      <!--    <el-page-header @back="$router.back()" content="详情页面"/>-->

      <div class="ke__panel-body">

        <k-form ref="form"
                label-width="100px"
                v-loading="loading"
                class="ke__margin"
                :data="data"
                :rules="rules"
                :validate-on-rule-change="false"
                @submit="onSubmit"
        >

          <k-form-item label="职位名称" prop="name">
            <el-input v-model="data.name"/>
          </k-form-item>

<!--          <k-form-item label="封面" prop="thumb" :validate="['required']">-->
<!--            <k-simple-upload v-model="data.thumb"/>-->
<!--          </k-form-item>-->

          <k-form-item label="每月薪资" style="max-width: 400px">
            <el-row>
              <el-col :span="11">
                <el-input v-model="data.money_min" placeholder="最低">
                  <span slot="append">千</span>
                </el-input>
              </el-col>
              <el-col :span="2" style="text-align: center">
                至
              </el-col>
              <el-col :span="11">
                <el-input v-model="data.money_max" placeholder="最高">
                  <span slot="append">千</span>
                </el-input>
              </el-col>
            </el-row>
          </k-form-item>

          <el-row>
            <el-col :span="12">
              <k-form-item label="经验" prop="exp_id"  :validate="['required']" hide-required>
                <el-select v-model.number="data.exp_id">
                  <el-option :value="0" label="不限"/>
                  <el-option v-for="item in $store.getters['zhaopin/exps']"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"/>
                </el-select>
              </k-form-item>
            </el-col>

            <el-col :span="12">
              <k-form-item label="学历" prop="edu_id" :validate="['required']">
                <el-select v-model="data.edu_id">
                  <el-option :value="0" label="不限"/>
                  <el-option v-for="item in $store.getters['zhaopin/edus']"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"/>
                </el-select>
              </k-form-item>
            </el-col>
          </el-row>

          <k-form-item label="机构" prop="company_id">
            <span v-show="companyText !== ''">
              {{ companyText }}
            </span>
            <el-button type="text" @click="selectCompanyDialog = true">选择机构</el-button>
          </k-form-item>

          <k-form-item label="工作城市" prop="area_code" :validate="['required']">
            <el-cascader v-model="data.area_code" :options="areas" :props="{ label: 'name', value: 'code' }"/>
          </k-form-item>

          <k-form-item label="工作地址" prop="address">
            <el-input v-model="data.address"/>
          </k-form-item>

          <k-form-item label="紧急处理">
            <el-date-picker v-model="data.urgent_time"
                            value-format="yyyy-MM-dd"
                            placeholder="留空则不做紧急处理"
                            :picker-options="urgentDateOptions"
            />
          </k-form-item>

          <k-form-item label="职位描述" prop="content">
            <k-editor v-model="data.content"/>
            <!--        <el-input v-model="data.content" type="textarea" rows="5"/>-->
          </k-form-item>
        </k-form>

        <!-- 公司选择窗 -->
        <index-company :show.sync="selectCompanyDialog" @select="onEventSelect"/>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import IndexCompany from '@/views/zhaopin/index-company'
import KEditor from '@/components/editor'
import KSimpleUpload from '@/components/simple-upload/index'
const todayDate = new Date()
@Component({
  props: {
    show: Boolean
  },
  components: {
    KSimpleUpload,
    IndexCompany,
    [KEditor.name]: KEditor
  }
})
export default class ZhaopinIndexEdit extends Vue {
  id = 0
  data = {
    exp: 0,
    money: 0,
    edu: 0,
    area_code: []
  }
  loading = false
  companyText = ''
  rules = {
    name: [
      { required: true, message: '职位名称不可为空' }
    ],
    company_id: [
      { required: true, message: '请选择机构' }
    ],
    address: [
      { required: true, message: '请填写工作地址' }
    ],
    content: [
      { required: true, message: '请填写职位描述' }
    ]
  }
  subing = false
  successCallback = null
  selectCompanyDialog = false

  get urgentDateOptions () {
    return {
      disabledDate: (date) => {
        return date <= todayDate
      }
    }
  }

  get _show () {
    return this.show
  }

  set _show (val) {
    this.$emit('update:show', val)
  }

  get areas () {
    return KE.array.tree(
      JSON.parse(JSON.stringify(this.$store.getters['area/list'])), 'code', 'upcode')
  }

  mounted () {
    this.$store.dispatch('zhaopin/getOptions')
    if (parseInt(this.$route.params.id)) {
      this.getRead(this.$route.params.id)
    }
  }

  getRead(id) {
    this.loading = true
    this.$http.get(`admin/zhaopin/${id}`)
      .finally(() => this.loading = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.data = result.data
          this.companyText = result.data.company.name
        } else {
          this.$message.error(result.res_msg)
          this._show = false
        }
      })
  }

  onClickBack () {
    this.$router.back()
  }

  // 提交
  onSubmit () {
    console.log(this.data)

    this.subing = true
    this.$http.post('admin/zhaopin', this.data)
      .finally(() => this.subing = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.$message.success('保存成功')
          this._show = false
          result.data.company = {
            id: this.data.company_id,
            name: this.companyText
          }
          this.$router.back()
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

  // 选择公司
  onEventSelect (item) {
    this.$set(this.data, 'company_id', item.id)
    this.companyText = item.name
  }

  onEventDialogClose () {
    this.$refs.form.resetFields()
  }

}
</script>

<style scoped>

</style>
